<div
	class="w-full bg-gray-500"
	style="
		background-image: url('https://source.unsplash.com/random/640x480');
		background-position: center center;
		background-blend-mode: multiply;
		background-size: cover;
	"
>
	<div
		class="container flex flex-col flex-wrap content-center justify-center p-4 py-20 mx-auto md:p-10"
	>
		<h1
			class="text-5xl antialiased font-semibold leading-none text-center"
			[ngClass]="['text' + light]"
		>
			Get Our Updates
		</h1>
		<p class="pt-2 pb-8 text-xl antialiased text-center" [ngClass]="['text' + light]">
			Find out about events and other news
		</p>
		<div class="flex flex-row">
			<input
				type="text"
				class="w-3/5 p-3 rounded-l-lg sm:w-2/3"
				placeholder="example@email.com"
			/>
			<button
				class="w-2/5 p-3 font-semibold rounded-r-lg sm:w-1/3"
				type="button"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				Subscribe
			</button>
		</div>
	</div>
</div>
